<template>
  <div class="add">
    <el-card>
      <el-icon><Tickets /></el-icon>数据列表
      <div class="btn">
        <el-button @click="showDialog = true">添加</el-button>
      </div>
    </el-card>
  </div>
  <el-table
    :data="list"
    border
    table-layout="auto"
    cell-class-name="align-c"
    header-row-class-name="align-c"
  >
    <el-table-column label="编号" prop="id" />
    <el-table-column label="商品名称" prop="name">
      <template #default="{ row }">
        <span>{{ row.product.name }}</span>
      </template></el-table-column
    >
    <el-table-column label="货号" prop="productSn">
      <template #default="{ row }">
        <span>NO.{{ row.product.productSn }}</span>
      </template>
    </el-table-column>
    <el-table-column label="商品价格" prop="price">
      <template #default="{ row }">
        <span>{{ row.product.price }}</span>
      </template></el-table-column
    >
    <el-table-column label="剩余数量" prop="stock"
      ><template #default="{ row }">
        <span>{{ row.product.stock }}</span>
      </template></el-table-column
    >
    <el-table-column label="秒杀价格" prop="flashPromotionPrice"
      ><template #default="{ row }">
        <span>{{ row.flashPromotionPrice }}</span>
      </template>
    </el-table-column>
    <el-table-column label="秒杀数量" prop="flashPromotionCount"
      ><template #default="{ row }">
        <span>{{ row.flashPromotionCount }}</span>
      </template></el-table-column
    >
    <el-table-column label="限购数量" prop="flashPromotionLimit"
      ><template #default="{ row }">
        <span>{{ row.flashPromotionLimit }}</span>
      </template></el-table-column
    >
    <el-table-column label="排序" prop="sort"
      ><template #default="{ row }">
        <span>{{ row.sort }}</span>
      </template></el-table-column
    >

    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button text type="primary" size="small" @click="edit(row)"
          >编辑</el-button
        >
        <el-button text type="primary" size="small" @click="del(row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="page">
    <ElConfigProvider :locale="zhCn">
      <div class="page">
        <el-pagination
          v-model:current-page="queryParams.pageNum"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="getList"
          @current-change="getList"
        />
      </div>
    </ElConfigProvider>
  </div>
  <addFlash :show="showDialog" @hide="closeDialog"></addFlash>
  <!-- 编辑框 -->
  <el-dialog
    style="width: 35%"
    title="编辑秒杀商品信息"
    v-model="showEditDialog"
  >
    <el-form style="margin: 10px 30px" :model="{ editList }">
      <el-form-item label="商品名称：">
        <span>{{ editList.product.name }}</span>
      </el-form-item>
      <el-form-item label="货号：">
        <span>NO.{{ editList.product.productSn }}</span>
      </el-form-item>
      <el-form-item label="商品价格：">
        <span>{{ editList.product.price }}</span>
      </el-form-item>
      <el-form-item label="秒杀价格：">
        <el-input v-model="editList.flashPromotionPrice">
          <template #prepend>
            <el-button>￥</el-button>
          </template>
        </el-input></el-form-item
      >
      <el-form-item label="剩余数量：">
        <span>{{ editList.product.stock }}</span>
      </el-form-item>
      <el-form-item label="限购数量：">
        <el-input v-model="editList.flashPromotionLimit"></el-input>
      </el-form-item>
      <el-form-item label="排序：">
        <el-input v-model="editList.sort"></el-input>
      </el-form-item>
    </el-form>
    <el-button @click="cancel">取消</el-button>
    <el-button type="primary" @click="submit">确定</el-button>
  </el-dialog>
</template>

<script setup lang="ts">
import useTable from "@/hooks/useTable";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import {
  deleteFlashRelationApi,
  getFlashProductListApi,
  updateFlashRelationApi,
} from "./api";
import { reactive, ref } from "vue";
import { useRoute } from "vue-router";
import addFlash from "./addFlash.vue";
import { ElMessage, ElMessageBox } from "element-plus";
const locale = zhCn;
const showDialog = ref(false);
const showEditDialog = ref(false);
const total = ref(0);
const closeDialog = (isReload?: boolean) => {
  showDialog.value = false;
  if (isReload) getList();
};
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  flashPromotionId: 0,
  flashPromotionSessionId: 0,
});
const route = useRoute();
queryParams.flashPromotionId = parseInt(route.query.flashPromotionId as string);
queryParams.flashPromotionSessionId = parseInt(
  route.query.flashPromotionSessionId as string
);
const list = ref<IFlashProduct[]>([]);
const getList = () => {
  getFlashProductListApi(queryParams).then((res) => {
    if (res.code === 200) {
      console.log(res);
      // list.value = res.data.list.map((item) => item.product);
      list.value = res.data.list;
      total.value = res.data.total;
    }
  });
};
// 编辑
let form = reactive({
  id: 0,
  name: "??",
  productSn: "",
  price: 0,
  flashPromotionPrice: "",
  flashPromotionLimit: "",
  flashPromotionCount: 0,
  sort: 0,
});

const editList = ref<any>();
const edit = (row: IFlashProduct[]) => {
  showEditDialog.value = true;
  editList.value = row;
  console.log(editList);
};
const submit = () => {
  console.log(editList.value);
  ElMessageBox.confirm("确定要修改吗？", "修改秒杀商品", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  }).then(() => {
    updateFlashRelationApi(editList.value).then((res) => {
      console.log(res);
      ElMessage.success("修改成功");
      showEditDialog.value = false;
      getList();
      // if(res.code)
    });

    // console.log("进来了");
  });
};
// 取消
const cancel = () => {
  showEditDialog.value = false;
};
// 删除
const del = (id: number) => {
  ElMessageBox.confirm("确定要删除吗？", "删除商品", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  }).then(() => {
    deleteFlashRelationApi(id).then((res) => {
      // console.log(res);
      if (res.code === 200) {
        ElMessage.success("删除成功");
        getList();
      }
    });
  });
};
getList();
</script>

<style lang="less" scoped>
.add {
  margin: 20px 0;
  :deep(.el-card__body) {
    display: flex;
    position: relative;
    // flex-wrap: wrap;
    // justify-content: space-between;
    align-items: center;
  }
  .btn {
    position: absolute;
    right: 10px;
  }
}
:deep(.align-c) {
  .cell {
    text-align: center !important;
    font-size: 12px;
  }
}
.page {
  display: flex;
  justify-content: flex-end;
}
</style>
